<!-- 添加居民 -->
<template>
    <div>
        <el-dialog :title="form.id?'修改居民':'添加居民'" :visible.sync="dialogVisible" width="40%" center
            :before-close="handleClose">
            <div class="box">
                <div style="flex:1">
                    <el-form ref="form" :model="form" label-width="80px" label-position="left" :rules="rules">
                        <el-form-item label="头像">
                            <el-upload v-model="form.photo" class="avatar-uploader"
                                action="http://estate.eshareedu.cn/estate/api/upload/add" :show-file-list="false"
                                :on-success="handleAvatarSuccess" :headers="{ Authorization: token }"
                                :before-upload="beforeAvatarUpload">
                                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </el-form-item>
                        <el-form-item label="楼栋">
                            <el-cascader v-model="form.buildingid" @change="changebing" :options="tableList"
                                :props="propstag" clearable style="margin-bottom:20px">
                            </el-cascader>
                        </el-form-item>
                        <el-form-item label="房间号" prop="houseid">
                            <el-select v-model="form.houseid" placeholder="请选择">
                                <el-option v-for="item in houseslist" :key="item.id" :label="item.houseno"
                                    :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="姓名" prop="name">
                            <el-input v-model="form.name" style="width:218px"></el-input>
                        </el-form-item>
                        <el-form-item label="性别">
                            <el-radio-group v-model="form.sex">
                                <el-radio :label="1">男</el-radio>
                                <el-radio :label="0">女</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-form>
                </div>
                <div style="flex:1">
                    <el-form :model="form" label-position="left" label-width="80px" :rules="rules">
                        <el-form-item label="民族" prop="nation">
                            <el-input v-model="form.nation" style="width:218px"></el-input>
                        </el-form-item>
                        <el-form-item label="籍贯" prop="usernative">
                            <el-input v-model="form.usernative" style="width:218px"></el-input>
                        </el-form-item>
                        <el-form-item label="身份证号" prop="cardid">
                            <el-input v-model="form.cardid" style="width:218px"></el-input>
                        </el-form-item>
                        <el-form-item label="联系电话" prop="mobile">
                            <el-input v-model="form.mobile" style="width:218px"></el-input>
                        </el-form-item>
                        <el-form-item label="住户类型" prop="usertype">
                            <el-select v-model="form.usertype" placeholder="请选择" style="width:218px">
                                <el-option v-for="(item,index) in Typeinfo" :key="index" :label="item.name"
                                    :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="add()">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { builList, houses, usertype, Add } from '@/api/userinfo'
const token = sessionStorage.getItem("token")
export default {
    props: {
        dialogVisible: {
            type: Boolean,
            default: false
        },
        handleClickdata: {
            type: Object,
            default: () => { }
        }
    },
    data() {
        return {
            form: {

            },
            imageUrl: '',
            token: token,
            propstag: {
                value: 'id',
                label: 'name',
                children: 'children',
                emitPath: false
            },
            tableList: [],
            houseslist: [],
            Typeinfo: [],
            imgage: "http://estate.eshareedu.cn/estate/upload/",
            rules: {
                houseid: [
                    { required: true, message: '', trigger: 'blur'}
                ],
                name: [
                    { required: true, message: '姓名不能为空', trigger: 'blur' }
                ],
                nation: [
                    { required: true, message: '民族不能为空', trigger: 'blur' }
                ],
                usernative: [
                    { required: true, message: '籍贯不能为空', trigger: 'blur' }
                ],
                cardid: [
                    { required: true, message: '身份证号不能为空', trigger: 'blur' }
                ],
                mobile: [
                    { required: true, message: '电话不能为空', trigger: 'blur' }
                ],
                usertype: [
                    { required: true, message: '', trigger: 'blur'}
                ],
            }
        };
    },
    created() {
        // 楼栋列表
        this.GetBuillist()

        // 居民类型
        this.getusertype()
    },
    // updated(){
    //     this.form = this.handleClickdata
    // },
    watch: {
        handleClickdata: {
            handler(val) {
                if (val) {
                    this.form = val
                    console.log(val);
                    for (let i in this.form) {
                        this.form[i] = val[i]
                        if (i === "photo") {
                            this.imageUrl = this.imgage + val[i]
                        }
                        if (i === 'sex') {
                            this.form.sex = val[i]
                        }
                        if (i === 'building') {
                            this.buildingid = val.buildingid
                        }
                    }
                }
            }
        }
    },
    methods: {
        // 楼栋列表
        async GetBuillist() {
            let res = await builList()
            console.log(res);
            if (res.errCode == 10000) {
                this.tableList = res.data.list
            }
        },
        // 房间号
        async changebing(val) {

            const obj = {
                buildingid: val
            }
            let res = await houses(obj)
            console.log(res);
            if (res.errCode == 10000) {
                this.houseslist = res.data.list
            }
        },
        // 居民类型
        async getusertype() {
            let res = await usertype()
            if (res.errCode == 10000) {
                this.Typeinfo = res.data.list
            }
        },
        async add() {
            let res = await Add(this.form)
            if (res.errCode == 10000) {
                let msg = this.form.id ? '修改成功' : '添加成功'
                this.$message({
                    message: msg,
                    type: 'success',
                });

            }

            this.$emit('isclose', false, true, {})
        },
        // 叉号关闭
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    this.$emit('isclose', false, false,)
                    this.form = {}
                })
                .catch(_ => { });
        },
        // 取消按钮
        cancel() {
            // dialogVisible = false
            this.$emit('isclose', false, false,)
            this.form = {}
        },
        handleAvatarSuccess(res, file) {
            // console.log(res);
            if (res.errCode == 10000) {
                this.form.photo = res.data
            }
            this.imageUrl = URL.createObjectURL(file.raw);

        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        }
    }
}
</script>

<style lang="less" scoped>
.box {
    width: 800px;
    height: 400px;
    display: flex;
    padding: 0;
}

.avatar-uploader /deep/.el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 75px;
    height: 75px;
    line-height: 75px;
    text-align: center;
}

.avatar {
    width: 75px;
    height: 75px;
    display: block;
}
</style>